<!--模块管理 basicInfoConfig-->
<template>
  <div class="commandManagement appMainWarp">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="代理商名称:">
        <el-input v-model="searchKey.agentname" clearable placeholder="请输入代理商名称" @keyup.enter.native="onsearch" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onsearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="addChange">添加</el-button>
      </el-form-item>
    </el-form>

    <template>
      <el-table ref="table" :data="searchData" v-loading="page.tableLoading" center stripe border>
        <el-table-column prop="agentid" label="代理商编码" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column prop="agentname" label="代理商名称" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column prop="agenttype" label="代理商类型" header-align="center" align="center" show-overflow-tooltip>
          <template slot-scope="props">
            {{props.row.agenttype==0?'平台自营':props.row.agenttype==1?'省级代理':props.row.agenttype==1?'市级代理':'区县代理'}}
            </template>
        </el-table-column>
        <el-table-column prop="areacode" label="代理区域代码" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" header-align="center" align="center" show-overflow-tooltip>
          <template slot-scope="props">
            {{props.row.status==1?'启用':'禁用'}}
            </template>
        </el-table-column>
        <el-table-column prop="contactman" label="联系人名称" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column prop="phone" label="联系方式" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column prop="addr" label="地址信息" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column label="操作" width="250">
          <template slot-scope="props">
            <el-button type="success" size="small" round  @click="editInfo(props.row)">修 改</el-button>
            <el-button type="danger" size="small" round  @click="delInfo(props.row)">删 除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <Pagination
      :total="page.totalRow"
      :page.sync="page.currentPage"
      :limit.sync="page.pageSize"
      @pagination="onSubmit"
    />
    <!-- 添加 修改 信息的弹框 -->
    <el-dialog :title="!addModel.item.agentid ? '新增' : '修改'" :visible.sync="addModel.flag" width="750px" :close-on-click-modal="false">
      <el-form ref="addModel" label-width="135px" :model="addModel.item">
        <div style="display:flex;">
          <el-form-item label="代理商名称:" required>
            <el-input v-model="addModel.item.agentname" placeholder="请输入代理商名称" />
          </el-form-item>
          <el-form-item label="代理区域代码:" required>
            <el-input v-model="addModel.item.areacode" placeholder="请输入代理区域代码" />
          </el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item label="代理商类型" required>
            <el-select v-model="addModel.item.agenttype" placeholder="请选择代理商类型">
              <el-option label="平台自营" :value="0" />
              <el-option label="省级代理" :value="1" />
              <el-option label="市级代理" :value="2" />
              <el-option label="区县代理" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态" required>
            <el-radio-group v-model="addModel.item.status">
              <el-radio :label="0">禁用</el-radio>
              <el-radio :label="1">启用</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item label="联系人名称:" required>
            <el-input v-model="addModel.item.contactman" type="input" placeholder="请输入联系人名称" />
          </el-form-item>
          <el-form-item label="联系方式:" required>
            <el-input v-model="addModel.item.phone" type="input" placeholder="请输入联系方式" />
          </el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item label="地址信息:" required>
            <el-input v-model="addModel.item.addr" type="input" placeholder="请输入地址信息" />
          </el-form-item>
          <div></div>
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addModel.flag = false">取 消</el-button>
        <el-button type="primary" @click="submitArea">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

//
import {
  getagentlist,
  addagent,
  editagent,
  delagent
} from '@/api/basicInfo/index'
import Pagination from '@/components/Pagination' // 分页
const defaultAddItem = {
  agentid: '',
  agentname: '',
  areacode: '',
  agenttype: 0,
  contactman: '',
  phone: '',
  addr: '',
  status: 1 // 1:启用 0:禁用
}
export default {
  name: 'AgentManagement',
  components: { Pagination },
  data() {
    return {
      searchKey: {
        agentname: ''// 姓名
      },
      searchData: [], // 搜索的值
      page: {
        tableLoading: false,
        currentPage: 1, // 当前页
        pageSize: 10, // 默认条数
        totalRow: 0, // 总条数
        totalPage: 0 // 总页数
      },
      addModel: {
        flag: false,
        item: defaultAddItem
      }
    }
  },
  mounted() {
    this.onsearch()
  },
  methods: {
    addChange() {
      this.addModel.item = Object.assign({}, defaultAddItem)
      this.addModel.flag = true
    },
    editInfo(row) {
      this.addModel.item = Object.assign({}, row)
      this.addModel.flag = true
    },
    submitArea() {
      var that = this
      var params = {}
      if (that.addModel.item.agentid) {
        params.agentid = that.addModel.item.agentid
      }
      params.agentname = that.addModel.item.agentname
      params.areacode = that.addModel.item.areacode
      params.agenttype = that.addModel.item.agenttype
      params.contactman = that.addModel.item.contactman
      params.phone = that.addModel.item.phone
      params.addr = that.addModel.item.addr
      if(!params.agentname){
        this.$message({
          type: 'warning',
          message: '代理商名称不能为空！'
        })
        return false
      }
      if(!params.areacode){
        this.$message({
          type: 'warning',
          message: '代理区域代码不能为空！'
        })
        return false
      }
      if(!params.contactman){
        this.$message({
          type: 'warning',
          message: '联系人名称不能为空！'
        })
        return false
      }
      if(!params.phone){
        this.$message({
          type: 'warning',
          message: '联系方式不能为空！'
        })
        return false
      }
      if(!params.addr){
        this.$message({
          type: 'warning',
          message: '地址信息不能为空！'
        })
        return false
      }
      var loginInit = that.$loading()
      if (params.agentid) {
        editagent(params)
          .then((res) => {
            loginInit.close()
            that.addModel.flag = false
            if (res.data.code == 0) {
              that.$message({
                type: 'success',
                message: '修改成功！'
              })
            }else{
              that.$message({
                type: 'success',
                message: res.data.msg
              })
            }
            that.onsearch()
          })
          .catch(() => {
            loginInit.close()
          })
      } else {
        addagent(params)
          .then((res) => {
            loginInit.close()
            that.addModel.flag = false
            if (res.data.code == 0) {
              that.$message({
                type: 'success',
                message: '新增成功！'
              })
            }else{
              that.$message({
                type: 'success',
                message: res.data.msg
              })
            }
            that.onsearch()
          })
          .catch(() => {
            loginInit.close()
          })
      }
    },
    // 删除
    delInfo(item) {
      this.$confirm('确定要删除此条记录吗？删除后不可恢复！', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var params = {}
        var that = this
        params.agentid = item.agentid
        delagent(params).then(res => {
          if (res.data.code == 0) {
            that.$message({
              type: 'success',
              message: '删除成功'
            })
          }
          that.onsearch()
        }).catch(error => [
          that.$message({
            type: 'warning',
            message: '删除失败'
          })
        ])
      })
    },
    onsearch() {
      this.page.currentPage = 1
      this.onSubmit()
    },
    onSubmit() {
      var params = {}
      var that = this
      params.pageindex = that.page.currentPage // 当前页数
      params.pagesize = that.page.pageSize // 每页展示条数
      params.agentname = that.searchKey.agentname
      that.page.tableLoading = true
      getagentlist(params)
        .then((res) => {
          that.page.tableLoading = false
          if (res.data.code == 0) {
            that.searchData = res.data.data.datalist
            that.page.totalRow = res.data.data.totalcount
          }else{
            that.$message({
              type: 'error',
              message: res.data.msg
            })
          }
          // that.searchData = res.data.data.datalist
          // that.page.totalRow = res.data.data.totalcount
          // that.page.totalPage = res.data.page.totalPageNum
          // that.page.pageSize = parseInt(res.data.page.pageNum)
        })
        .catch(() => {
          that.page.tableLoading = false
          
        })
    }

  }
}
</script>

<style scoped>
.el-input {
    width: 200px;
}
.el-table .el-button {
    display: inline-block;
    margin: 0 10px;
}
</style>
